/*
  学习目标：ref
  使用场景🔔:
    1. 获取DOM元素
    2. 获取组件实例对象
  用法:
*/
import React, { Component } from 'react';

export default class App extends Component {
  // 1. 创建ref对象
  iptRef = React.createRef();
  childRef = React.createRef();

  // 3. 通过ref对象.current属性获取dom或者组件实例对象
  render() {
    console.log('iptRef  ----->  ', this.iptRef);
    return (
      <div>
        <input
          type="text"
          // 2. 绑定到dom元素上
          ref={this.iptRef}
        />
        <button
          onClick={() => {
            this.iptRef.current.focus();
          }}
        >
          点我激活input
        </button>

        <Child
          // 2. 绑定到子组件上
          ref={this.childRef}
        ></Child>

        <button
          onClick={() => {
            // 3. 通过ref对象.current属性获取dom或者组件实例对象
            this.childRef.current.handleAlert();
          }}
        >
          点我alert一下
        </button>
      </div>
    );
  }
}

class Child extends React.Component {
  handleAlert() {
    alert('我是子组件的方法, 被调用了');
  }

  render() {
    return <div>Child</div>;
  }
}
